<template>
  <div class="add-match-page">
    <el-card class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>{{ isEditMode ? '编辑赛事' : '新增赛事' }}</h2>
          <p>{{ isEditMode ? '修改赛事信息' : '添加新的赛事' }}</p>
        </div>
        <div class="action-section">
          <el-button @click="goBackWrapper">
            <el-icon><ArrowLeft /></el-icon>
            返回列表
          </el-button>
        </div>
      </div>
    </el-card>

    <el-card class="form-card">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="match-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="赛事名称" prop="tournament_name">
              <el-input v-model="form.tournament_name" placeholder="请输入赛事名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="比赛时间" prop="match_time">
              <el-date-picker
                v-model="form.match_time"
                type="datetime"
                placeholder="请选择比赛时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="赛事类型" prop="tournament_type">
              <el-select v-model="form.tournament_type" placeholder="请选择赛事类型" style="width: 100%">
                <el-option label="WTT常规赛" value="WTT常规赛" />
                <el-option label="WTT大满贯" value="WTT大满贯" />
                <el-option label="世界杯" value="世界杯" />
                <el-option label="亚运会" value="亚运会" />
                <el-option label="奥运会" value="奥运会" />
                <el-option label="世锦赛" value="世锦赛" />
                <el-option label="乒超联赛" value="乒超联赛" />
                <el-option label="德甲联赛" value="德甲联赛" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="赛事积分" prop="tournament_score">
              <el-input-number v-model="form.tournament_score" placeholder="请输入赛事积分" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="赛事简介" prop="tournament_intro">
              <el-input v-model="form.tournament_intro" placeholder="请输入赛事简介" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="赛事地点" prop="venue">
              <el-input v-model="form.venue" placeholder="请输入赛事地点，如：北京" />
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="比赛状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择比赛状态" style="width: 100%">
                <el-option label="待开始" value="pending" />
                <el-option label="进行中" value="ongoing" />
                <el-option label="已结束" value="completed" />
                <el-option label="已取消" value="cancelled" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="备注">
          <el-input
            v-model="form.remarks"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmitWrapper" :loading="submitting">
            <el-icon><Check /></el-icon>
            {{ isEditMode ? '更新' : '保存' }}
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
          <el-button @click="handleCancelWrapper">
            <el-icon><Close /></el-icon>
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { 
  goBack,
  handleSubmit,
  handleReset,
  handleCancel,
  form,
  rules, 
  submitting,
  isEditMode,
  initPage
} from './add.ts'

const router = useRouter()
const route = useRoute()

// 创建包装函数
const goBackWrapper = () => goBack(router)
const handleSubmitWrapper = () => handleSubmit(router)
const handleCancelWrapper = () => handleCancel(router)

// 页面挂载时初始化
onMounted(() => {
  initPage(route)
})
</script>

<style scoped>
.add-match-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.title-section p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.form-card {
  min-height: 600px;
}

.match-form {
  max-width: 800px;
  margin: 0 auto;
}

.match-form .el-form-item {
  margin-bottom: 20px;
}
</style>